<template>
	<view :class="listTouchDirection == 'left'?'ztnCustom-move-cur':''" @tap.stop='deviceNavigation()'
		class="padding-left-sm padding-right-sm padding-top-sm flex align-center justify-start"
		@touchstart="ListTouchStart" @touchmove="ListTouchMove" :data-deviceCore="device.deviceCore">
		<image style="width: 35px;height: 35px;" :src='device.iconUrl' />
		<view class="flex align-center justify-between solid-bottom padding-bottom-sm padding-left-sm padding-right-sm" style="flex-grow: 1;">
			<view>
				<view class="text-cut text-sm text-gray">
					{{device.deviceName}}
				</view>
				<view :style="{color : themeConfig.primaryColor}" class="margin-bottom-xs text-sm margin-top-xs">
					{{device.deviceCore}}<text v-if="device.warnNum > 0"
						class="cuIcon-infofill text-red"></text>
				</view>
				<view class="text-cut text-gray text-xs">
					{{device.address}}
				</view>
			</view>
			<view>
				<view class="flex justify-center">
					<surplus class="surplus" id="surplus" :status="device.status"
						:charging="device.charging" :surplus="device.surplus">
					</surplus>
					<view style="line-height: 44rpx;"
						:style="{color : device.status === 'ONLINE' ? '#0F0F0F' :'#AAAAAA'}"
						class="text-center text-sm text-gray margin-left-sm">
						{{ formatDeviceStatus(device.status) }}
					</view>
				</view>
				<view class="cuIcon-settingsfill text-right text-lg margin-top-sm margin-right-xs" @tap.stop='deviceSetting()'>
				</view>
			</view>
		</view>
		<view class="ztnCustom-move padding-bottom-sm">
			<view class='bg-blue light text-center view' @tap.stop='navigation()'>
				<text class="cuIcon-footprint padding-right-xs text-xl"></text>
				<text>{{$t('navigation')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listDeviceStatus,
		formatDeviceStatus,
	} from '@/util/utils.js'
	import Surplus from '@/components/ztn-custom/Surplus/index.vue'
	import * as storage from '@/util/storage.js'
	export default {
		name: 'DeviceListItem',
		data() {
			return {
				listTouchStart: 0,
				listTouchDirection: null,
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		props: {
			device: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: {
			Surplus
		},
		created() {},
		emits:['is-show-nav'],
		methods: {
			formatDeviceStatus(status) {
				return formatDeviceStatus(this, status)
			},
			deviceNavigation() {
				const component = storage.getDeviceNavigationComponent() || 'deviceInfo'
				uni.navigateTo({
					url: `/pages/deviceNavigation/deviceNavigation?deviceCore=${this.device.deviceCore}&component=${component}`
				})
				this.$emit('is-show-nav', true);
			},
			deviceSetting() {
				uni.navigateTo({
					url: `/pages/deviceNavigation/deviceNavigation?deviceCore=${this.device.deviceCore}&component=deviceSetting`
				})
				this.$emit('is-show-nav', true);
			},
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			ListTouchMove(e) {
				const move = e.touches[0].pageX - this.listTouchStart
				if (move > 100) {
					this.listTouchDirection = 'right'
				} else if (move < -100) {
					this.listTouchDirection = 'left'
				}
			},
			navigation() {
				uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: this.device.lat,
					longitude: this.device.lng,
					name: this.device.deviceName,
					address: this.device.address,
					success: () => {}
				})
			},
		}
	}
</script>

<style scoped>
	.ztnCustom-move-cur {
		transform: translateX(-300rpx)
	}

	.ztnCustom-move {
		position: absolute;
		z-index: 999;
		right: 0;
		display: flex;
		width: 300rpx;
		height: 100%;
		transform: translateX(100%);
	}

	.ztnCustom-move .view {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center
	}
</style>
